<template>
    <div id="teamPage">
        <van-search v-model="searchText" placeholder="搜索队伍" @search="onSearch" />
        <van-button class="addTeamButton" icon="plus" type="primary" @click="doAddTeam" />
        <van-empty v-if="!teamList || teamList.length < 1" description="数据为空" />
        <template v-else>
            <TeamCardList :teamList="teamList"></TeamCardList>
        </template>
    </div>
</template>

<script setup>
import TeamCardList from '@/components/TeamCardList.vue';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import request from '@/utils/axios';
import { showFailToast } from 'vant';
const router = useRouter()
const doAddTeam = () => {
    router.push("/team/add")
}
const searchText = ref('');
const teamList = ref([])
const listTeam = async () => {
    const res = await request.get('/team/list', {
        params: {
            searchText: searchText.value
        }
    }
    );
    if (res.data && res.data.length > 0) {
        res.data.map((team) => {
            team.avatarUrl = "data:image/png;base64," + team.avatarUrl
            return team
        })
    }else {
        showFailToast('未查询到相关队伍！')
    }

    if (res?.code === 0) {
        teamList.value = res.data;
    } else {
        showFailToast("加载队伍失败，请刷新重试！");
    }
}
onMounted(async () => {
    listTeam()
})
// 根据输入的文本搜索队伍
const onSearch = () => {
    listTeam();
}

</script>

<style scoped>
.addTeamButton {
    position: fixed;
    bottom: 60px;
    height: 50px;
    left: 12px;
    width: 50px;
    border-radius: 50%;
    z-index: 9999;
}
</style>